<template>
    <div class="container">
      <!--菜单-->
      <MenuAnalysisComponent  :onEvent="clickMenu" :selectCodeEvent="selectCodeHandle"/>
  
      <!--主页-->
      <component :is="currentPage" style="flex:90%"/>
    </div>
  </template>
  
  
  <script >
  import MenuAnalysisComponent from "./base/MenuAnalysisComponent.vue";
  import AnalysisComponent2 from "./analysis/AnalysisComponent2.vue";
  import AnalysisComponent3 from "./analysis/AnalysisComponent3.vue";

  export default {
    components: { 
       AnalysisComponent2, 
       AnalysisComponent3
    },
    data() {
      return {
        data:1,
        currentPage: "AnalysisComponent2"
      }
    },
    methods: {
        clickMenu(value) {
            console.log("接收数据" + value)
            if (this.data !== value) {
              this.data = value
              console.log("接收数据" + this.data + (this.data == 1))
              if (this.data == 1) {
                this.currentPage = 'AnalysisPage'
              } else if (this.data == 2){
                this.currentPage = 'AnalysisComponent2'
              } else if (this.data == 3){
                this.currentPage = 'AnalysisComponent3'
              } else if (this.data == 4){
                this.currentPage = 'KLinePage'
              }  else {
                this.currentPage = 'MessagePage'
              }          
            }
        },
        selectCodeHandle(value) {
          
          const stockCode = value.split(' ')[0]
          const stockName = value.split(' ')[1]
          console.log("接收数据" +  stockCode + stockName)
          this.$store.dispatch('changeStockCode', stockCode);
          this.$store.dispatch('changeStockName', stockName);
        },
    }
  };
  </script>
  
  <style scoped>
  .container {
      display: flex;
      flex:90%;
  }
  </style>